<template>
    <div class="jzcl" :style="wukongPosition"></div>
</template>

<script>
export default{
    name:"JCZL",
    props:{
        x:{
            type:Number,
            default:0
        },
        y:{
            type:Number,
            default:0
        }
    },
    // 计算属性
    computed:{
        //悟空的坐标通过 x和y计算出来
        wukongPosition(){
            return {
                left:this.x+'px',
                top:this.y+'px'
            }
        }
    }
}
</script>

<style scoped>
.jzcl{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url("../../assets/images/jczl.jpg");
    background-size: 100% 100%;
    position: fixed;
}
</style>